import React, { useState } from 'react'
import { NavBar, Space, Tag, Toast } from 'antd-mobile'
import { ResultPage, Card } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import { Input } from 'antd-mobile'
import { Button } from 'antd-mobile'
import request from '../../api/request'
import { useNavigate } from 'react-router-dom'


function Index() {
    const ll=useNavigate()
    const [start, setStart] = useState('')
    const [end, setEnd] = useState('')

    const sou = async () => {
        const res = await request.get('/api/trip/airplane', {
            params: {
                start,
                end
            }
        })
        console.log(res.data.data)
        if (start == '' || end == '') {
            Toast.show({
                icon: 'success',
                content: res.message,
                duration: 1000
            })
            return
        }
        ll(`/list?start=${start}&end=${end}`)
    }
    return (
        <div>

            <ResultPage
                status='success'
                title='火车票预订'
                description='便捷购票，服务您的每一次出行'
            >
                <ResultPage.Card style={{ height: 200, padding: 8 }}>
                    <div className='ee'>
                        <Input
                            placeholder='出发城市'
                            value={start}
                            onChange={val => {
                                setStart(val)
                            }}
                        />
                        <LoopOutline fontSize={55} />
                        <Input
                            placeholder='到达城市'
                            value={end}
                            onChange={val => {
                                setEnd(val)
                            }}
                        />
                    </div>

                    <div className='rr'>
                        <h3>5月9日  明天</h3>
                    </div>

                    <div className='tt'>
                        <Button block color='default' size='large' onClick={() => sou()}>
                            查询
                        </Button>
                    </div>

                    <div>
                        <Tag
                            color='default'
                            fill='outline'
                            style={{ '--border-radius': '20px' }}
                        >
                            合肥-南京
                        </Tag>

                        清空
                    </div>
                </ResultPage.Card>
            </ResultPage>

            <div className='yy'>
                <Space style={{ '--gap': '24px' }}>
                    <Button>12306账号</Button>
                    <Button>我的订单</Button>
                    <Button>帮助中心</Button>
                </Space>
            </div>
        </div>
    )
}

export default Index
